<template>
	<!-- 收益 -->
	<view class="integral wap">
		<!-- 上面 -->

		<view class="top-mian">
			<view class="top-mian-t">
				<view class="text2" @click="toGift()">
					礼物明细
					<image class="rimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png"></image>
				</view>
				<view class="tm">
					<view class="text3">可提现金额</view>
					<view class="money">{{toDecimal(total*0.6)}}</view>
					<view class="text1">礼物数：{{total}}</view>

				</view>
				<view class="cont-mian">
					<view class="progress-box">
						<view style="display: flex;justify-content: space-between;    margin-bottom: 18rpx;">
							<view class="cm-t1">
								<view class="">
									当前结算比例60%
								</view>
								<!-- <image src="/static/img/icon_wenhao.png"></image> -->
							</view>
							<view class="cm-t2">
								最高结算比例70%
							</view>
						</view>
						<progress :percent="pgList" activeColor="#0D0D0D" border-radius="5px" stroke-width="15" />
					</view>
					<view class="top-mian-btn">
								<button class="top-mian-btn-2" @click="openDh">兑换余额</button><button class="top-mian-btn-1"
									@click="openTixia">立即提现</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 中部 -->
		<!-- 下部 -->
		<view class="btm-mian">
			<h1>如何提升结算比例？</h1>
			<view class="bm-b">
				<view class="bm-b-L">
					<!-- <view class="bm-b-L-T1">
						+3%
					</view>
					<view class="bm-b-L-T2">
						结算比例
					</view> -->
					<image class="bmimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711421527076921.png"></image>
				</view>
				<view class="">
					<view class="bm-b-R">
						连续每天登录平台可以提升1%结算比例，最多3%
					</view>
					<!-- <button class="bm-b-R-btn">去完成</button> -->
				</view>

			</view>

		</view>

		<uni-popup ref="tixia" type="center">
			<view class="pop_con">
				<view class="hd f1">结算提现</view>
				<view class="inp">
					<view class="lab">金额:</view>
					<input type="number" v-model="price" placeholder="最小提现为10">
				</view>
				<view class="btns">
					<u-button text="取消" @click="closeTixia"></u-button>
					<u-button type="success" text="确定" @click="depoist"></u-button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="duihuan" type="center">
			<view class="pop_con">
				<view class="hd f1">兑换余额</view>
				<view class="inp">
					<view class="lab">数量:</view>
					<input type="number" v-model="dh_price" placeholder="最小兑换数量为1">
				</view>
				<view class="btns">
					<u-button text="取消" @click="closeDh"></u-button>
					<u-button type="success" text="确定" @click="change"></u-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pgList: "85",
				total: 0,
				deposit_money:0,
				user: [],
				price: 10,
				dh_price: 1
			}
		},
		onLoad() {
			this.init();
		},

		methods: {
			closeTixia() {
				this.$refs.tixia.close();
			},
			async openTixia() {

				if (this.total <= 0) {
					this.$pv.msg('暂无可结算的礼物数')
					return;
				}

				//先判断用户是否实名，如果未实名，跳转至实名页面
				let u = uni.getStorageSync('user');
				let res = await this.$api.post('User/GetUserInfo', {
					ID: u.UserID
				});
				let _this = this;
				if (res.data.IsTrueName != 1) {

					uni.showModal({
						title: '温馨提示',
						content: '结算需要实名认证，需要认证吗？',
						confirmText: "去认证",
						success: function(res) {
							if (res.confirm) {
								_this.nav_to('/pages/user/real_name');
							} else if (res.cancel) {

							}
						}
					});

					return;
				}

				// if (!res.data.Bank) {
				// 	uni.showModal({
				// 		title: '温馨提示',
				// 		content: '您未设置收款账号，需要设置吗？',
				// 		confirmText: "去设置",
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				_this.nav_to('/pages/user/fee_setting?type=3');
				// 			} else if (res.cancel) {

				// 			}
				// 		}
				// 	});


				// 	return;
				// }

				this.$refs.tixia.open();
			},
			closeDh() {
				this.$refs.duihuan.close();
			},
			openDh() {
				if (this.total <= 0) {
					this.$pv.msg('暂无可兑换的礼物数')
					return;
				}
				
				this.dh_price=this.total;

				this.$refs.duihuan.open();
			},
			async getSaleChannelDetail() {
				let res = await this.$api.post('/SaleChannel/SaleChannelDetail', {
					CompanyID: 6002
				});

				this.total = res.data.GiftIncome;

			},

			async init() {
				await this.getSaleChannelDetail();

			},
			async depoist() {

				if (this.price < 10) {
					this.$pv.msg('提现不能小于10');
					return;
				}
				if (this.price > this.total * 0.6) {
					this.$pv.msg('提现金额不能超过可提现金额');
					return;
				}
				
				if (this.price > 500) {
					this.$pv.msg('提现不能大于500');
					return;
				}
				

				//提现
				this.$pv.load();


				let d = await this.$api.post('/SaleChannel/Deposit', {
					Money: this.price,
					CommissionType: '礼物收入'
				});

				console.log(JSON.stringify(d.data));

				if (d.data == 0) {
					setTimeout(() => {
						this.$pv.closeLoad();
						this.$pv.msg('提现申请成功，10分钟内微信零钱到账');

						this.$refs.tixia.close();

						this.init();
					}, 500);
				} else {
					this.$pv.closeLoad();
					this.$pv.msg(d.message);
					return;

				}
			},
			async change() {
				//兑换余额
				this.$pv.load();

				if (this.dh_price < 1) {
					this.$pv.msg('兑换数不能小于1');
					return;
				}

				if (this.dh_price > this.total) {
					this.$pv.msg('兑换金额不能超过可提现金额');
					return;
				}

				let d = await this.$api.post('/SaleChannel/ChangeBalance', {
					Money: this.dh_price,
					CommissionType: '礼物收入'
				});


				if (d.data == 0) {
					setTimeout(() => {
						this.$pv.closeLoad();
						this.$pv.msg('兑换成功');

						this.$refs.duihuan.close();

						this.init();
					}, 500);

				} else {
					this.$pv.closeLoad();
					this.$pv.msg(d.message);
					return;
				}
			},
			toGift() {
				this.nav_to('/pages/user/user_commission?t=1')
			},
			toDecimal(x) {
				var f = parseFloat(x).toFixed(2)
				return f;
			}

		}
	}
</script>

<style lang="scss">
page{
	
	background-color: #F6F6F6;
}

	.bg {
		background: #262626;
		border-radius: 16rpx;

	}

	.top-mian {
		height: 450rpx;
		width: 100%;
		background: linear-gradient(180deg, #FCF5E5 0%, #F6F6F6 100%);
	}

	.top-mian-t {
		height: 500rpx;
		padding: 32rpx;
		box-sizing: border-box;
		// display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		background-color: #fff;
		border-radius: 24rpx;
		margin-top: 30rpx;
		.text2 {
				position: absolute;
				right: 52rpx;
				top: 52rpx;
				color: #999999;
				font-size: 28rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				display: flex;
    			align-items: center;
				.rimg{
					width: 32rpx;
					height: 32rpx;
					// vertical-align: middle;
					display: block;
				}
			}
		.tm {
			position: relative;
			.text1{
				font-size: 28rpx;
				color: #999999;
			}
			.text3{
				color: #333333;
				font-size: 28rpx;
				margin-top: 40rpx;
			}
		}
	}

	.top_item {
		float: right;
		height: 30rpx;
		text-align: right;
	}

	.money {
		color: #333333;
		font-size: 72rpx;
		font-weight: 600;
		// height: 120rpx;
	}

	.top-mian-btn {
		display: flex;
		margin-top: 54rpx;
	}

	.top-mian-btn-1 {
		margin: 30rpx;
		background-color: #0D0D0D;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		border-radius: 48px;
		width: 280rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.top-mian-btn-2 {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 48px;
		border: 1rpx solid #0D0D0D;
		width: 280rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}

	.cont-mian {
		height: 150rpx;
	}

	.btm-mian {
		padding: 0;
		margin-left: -30rpx;
		margin-top: 117rpx;
		height: 200rpx;
		width: 100vw;
		// min-height: 770rpx;
		border-radius: 25rpx;
		// background-color: #fcfcfe;
	}

	.btm-mian h1 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		margin-left: 38rpx;
	}

	.bm-b {
		width: 90%;
		margin: 0 auto;
		background-color: #ffffff;
		height: 180rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.cm-t1 {
		display: flex;
		font-size: 24rpx;
		color: #666666;
		align-items: center;

	}

	.cm-t1 image {
		height: 30rpx;
		width: 30rpx;
	}

	.cm-t2 {
		color: #666666;
		font-size: 24rpx;
	}

	.bm-b-L {
		margin-left: 20rpx;
		border-radius: 10rpx;
		// height: 120rpx;
		// width: 120rpx;
		.bmimg{
			width: 98rpx;
			height: 98rpx;
		}
	}

	.bm-b-R {
		color: #333333;
		font-size: 28rpx;
		margin-left: 20rpx;
		// height: 100rpx;
		// overflow: hidden;
		margin-right: 20rpx;
	}

	.bm-b-R-btn {
		border: 1px black solid;
		border-radius: 5px;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		float: right;
		margin-right: 20rpx;
	}

	.bm-b-L-T1 {
		color: #5d4a1f;
		margin: 20rpx 20rpx 0rpx 20rpx;
	}

	.bm-b-L-T2 {
		color: #a99b6e;
		font-size: 16rpx;
		margin-left: 20rpx;
	}


	.pop_con {
		height: 400rpx;
		background: #fff;
		width: 650rpx;
		border-radius: 16rpx;
		border: 1px solid #FEF0BC;
		.hd {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #eee;
			text-align: center;
			line-height: 90rpx;
			color: #333;
			font-weight: bolder;
		}

		.inp {
			margin-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.lab {
				font-size: 32rpx;
				color: #666;
			}

			input {
				margin-top: 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				padding-left: 10rpx;
				box-sizing: border-box;
				border: 1px solid #eee;
				border-radius: 10rpx;
				color: #000;
			}
		}

		.btns {
			margin-top: 40rpx;
			display: flex;
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: space-between;

			/deep/ .u-button__text {
				color: #666;
			}

			/deep/ .u-button--success {
				text {
					color: #fff !important;
				}
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			}

			/deep/ .u-button {
				width: 290rpx;
			}
		}
	}
</style>